<!doctype html>
<html>
  <head>
      <meta charset="utf-8">
      <script src="js/angular.min.js"></script>
  </head>
  <body ng-app="form-example2">
    <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
    <pre>model = {{content}}</pre>
  </body>
  <style type="text/css">
    div[contentEditable] {
      cursor: pointer;
      background-color: #D0D0D0;
    }
  </style>

  <script type="text/javascript">
    angular.module('form-example2', []).directive('contenteditable', function() {
      return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
          // view -> model
          elm.bind('blur', function() {
            scope.$apply(function() {
              ctrl.$setViewValue(elm.html());
            });
          });

          // model -> view
          ctrl.$render = function(value) {
            elm.html(value);
          };

          // load init value from DOM
          ctrl.$setViewValue(elm.html());
        }
      };
    });
  </script>
</html>